@use '../abstracts/variables' as *;

.btn {
    &,
    &:link,
    &:visited {
        text-transform: uppercase;
        text-decoration: none;
        padding: 1.5rem 4rem;
        display: inline-block;
        border-radius: 10rem;
        transition: all .2s;
        /*设置所有移动的时间*/
        position: relative;
        font-size: $default-font-size;

        border: none;
        cursor: pointer;
    }

    &:hover {
        transform: translateY(-0.3rem);
        box-shadow: 0 1rem 2rem rgba($color-black, 0.2);

        &::after {
            /* transform: scaleX(1.4) scaleY(1.6); */
            /* opacity: 0; */
            animation: identifier 0.2s ease-in;
            /*不使用动画使用上面的配置也能达到相同的效果 */
        }
    }

    &:active,
    &:focus {
        outline: none;  //防止outline显示
        transform: translateY(-0.1rem);
        box-shadow: 0 1rem 2rem rgba($color-black, 0.2);
    }

    &-white {
        background: $color-white;
        color: $color-grey-dark;

        &::after {
            background: $color-white;
        }
    }

    &-green {
        background: $color-primary;
        color: $color-white;

        &::after {
            background: $color-primary;
        }
    }

    &::after {
        content: "";
        display: inline-block;
        height: 100%;
        width: 100%;
        border-radius: 10rem;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
        transition: all .2s;
    }

    &-animated {
        animation: showFromDismiss 1s ease-in 0.75s;
        animation-fill-mode: backwards;
        /*由于动画是延迟执行的，所以一开始按钮就会显示，这是需要设置这个属性使得按钮不可见*/
    }
}

.btn-text {

    &:link,
    &:visited {
        font-size: $default-font-size;
        color: $color-primary;
        display: inline-block;
        text-decoration: none;
        border-bottom: 1px solid $color-primary; //这里使用currentColor会自动获取当前元素的颜色
        padding: 3px;
        font-weight: 700;
        transition: all .2s;
    }

    &:hover {
        box-shadow: 0 1rem 2rem rgba($color-black, 0.15);
        background-color: $color-primary;
        color: $color-white;
        transform: translateY(-2px);
        // border-bottom: 1px solid $color-primary;
    }

    // color: $color-primary;
    // text-decoration-color: $color-primary;
    // text-underline-offset: 1rem;
    // -webkit-text-underline-offset: 1rem;
    // font-size: $default-font-size;

    // &:hover {
    //     text-decoration: none;
    //     background-color: $color-primary;
    //     color: $color-white;
    //     padding: 1rem 0.5rem;
    // }
}